<template>
  <div class="model">
    <van-popup v-model="popUpshow" position="right" :style="{ height: '100%', width: '90%' }">
      <div class="pop-top">
        <p>筛选</p>
        <p @click="emptyClick">清空</p>
      </div>
      <div class="pop-content">
        <div class="event-conditions">
          <div class="event-conditions-box">
            <p class="event-title">时间</p>
            <div class="event-status-box">
              <div
                class="event-status"
                :class="{ eventstatusActive: eventStatusIndex == index }"
                v-for="(item, index) in eventStatusTag"
                :key="index"
                @click="eventStatusClick(item, index)"
              >
                {{ item.description }}
              </div>
            </div>
            <div class="reporting-time">
              <van-field
                readonly
                clickable
                name="expirationData"
                v-model="foemdata.startTime"
                placeholder="请输入开始时间"
                @click="dateOpenPopup('1')"
              />
              <p>-</p>
              <van-field
                readonly
                clickable
                name="expirationData"
                v-model="foemdata.endTime"
                placeholder="请输入结束时间"
                @click="dateOpenPopup('2')"
              />
            </div>
            <p class="event-titleA">行政区划</p>
            <div class="event-status-box disposal-department">
              <div
                class="event-status"
                :class="{ eventTypeActive: eventtypeIndex == index }"
                v-for="(item, index) in disposaldepartment"
                :key="index"
                @click="eventtypeClick(item, index)"
              >
                {{ item.regionName }}
              </div>
            </div>
            <div v-if="chuzhistatus">
              <p class="event-titleA">处置部门</p>
              <div class="event-status-box disposal-department">
                <div
                  class="event-status"
                  :class="{ eventTypeActive: zhnnegtypeIndex == index }"
                  v-for="(item, index) in zhinnegbumen"
                  :key="index"
                  @click="zhinnegClick(item, index)"
                >
                  {{ item.departmentName }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="pop-bottom">
        <button @click="emptyClick">清空</button>
        <button @click="determine">确定</button>
      </div>
    </van-popup>
    <!-- 日期 -->
    <van-popup v-model="datePopupShow" round position="bottom" @close="date = new Date()">
      <van-datetime-picker
        v-model="date"
        type="date"
        title="选择年月日"
        @cancel="datePopupShow = false"
        @confirm="dateOnConfirm"
      />
    </van-popup>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import Cockpit from '@/api/cockpit'
import EventOverview from '@/api/eventOverview'
export default {
  name: 'index',
  props: {
    bumen: {
      type: Boolean
    }
  },
  watch: {
    bumen(newValue) {
      if (newValue === true) {
        this.chuzhistatus = true
        this.departmentList()
      } else {
        this.chuzhistatus = false
      }
    }
  },
  data() {
    return {
      popUpshow: false, // 筛选显示
      erjiMenu: false, // 督办切换
      popactive: 0,
      treeactive: 0,
      items: [],
      eventStatusTag: [
        {
          icon: 1,
          description: '本日'
        },
        {
          icon: 2,
          description: '本周'
        },
        {
          icon: 3,
          description: '本月'
        },
        {
          icon: 4,
          description: '本年'
        }
      ],
      disposaldepartment: [],
      zhinnegbumen: [],
      currentDate: new Date(2021, 0, 17),
      datePopupShow: false,
      date: '',
      timedivision: '',
      eventStatusIndex: -1, // 事件状态切换
      eventtypeIndex: -1, // 事件类型选中切换class
      zhnnegtypeIndex: -1, // 事件类型选中切换class
      foemdata: {
        timeUnitType: '',
        regionCode: '',
        eventType: '',
        startTime: '',
        endTime: '',
        departmentCode: ''
      },
      chuzhistatus: false
    }
  },
  computed: {
    ...mapState({
      user: state => state.userInfo
    })
  },
  created() {
    this.foemdata.regionCode = this.user.regionCode
  },
  mounted() {
    this.adlmenu()
  },
  methods: {
    dateOpenPopup(item) {
      if (item === '1') {
        this.timedivision = 1
      } else {
        this.timedivision = 2
      }
      this.datePopupShow = true
    },
    dateOnConfirm(val) {
      const year = val.getFullYear()
      let month = val.getMonth() + 1
      let day = val.getDate()
      let hour = val.getHours()
      let minute = val.getMinutes()
      if (month >= 1 && month <= 9) {
        month = `0${month}`
      }
      if (day >= 1 && day <= 9) {
        day = `0${day}`
      }
      if (hour >= 0 && hour <= 9) {
        hour = `0${hour}`
      }
      if (minute >= 0 && minute <= 9) {
        minute = `0${minute}`
      }
      if (this.timedivision === 1) {
        this.foemdata.startTime = `${year}-${month}-${day}`
      } else {
        this.foemdata.endTime = `${year}-${month}-${day}`
      }
      this.datePopupShow = false
    },
    // 选项格式化函数
    formatter(type, value) {
      if (type === 'year') {
        return `${value}年`
      } else if (type === 'month') {
        return `${value}月`
      } else if (type === 'day') {
        return `${value}日`
      } else if (type === 'hour') {
        return `${value}时`
      } else if (type === 'minute') {
        return `${value}分`
      } else if (type === 'second') {
        return `${value}秒`
      }
      return value
    },
    leadershipClick() {
      this.popUpshow = true
      this.popactive = 0
      this.eventStatusIndex = -1
      this.eventtypeIndex = -1
    },
    // 清空
    emptyClick() {
      this.foemdata.startTime = ''
      this.foemdata.endTime = ''
      this.popactive = 0
      this.eventStatusIndex = -1
      this.eventtypeIndex = -1
    },
    // 事件状态点击
    eventStatusClick(item, index) {
      this.eventStatusIndex = index
      this.foemdata.timeUnitType = item.icon
    },
    // 事件类型点击
    eventtypeClick(item, index) {
      this.eventtypeIndex = index
      this.foemdata.regionCode = item.regionCode
    },
    adlmenu() {
      Cockpit.Online.queryRegion({ regionCode: this.user.regionCode }).then(res => {
        const data = { ...res.data }
        if (data.status === 0) {
          const reversedata = data.data.reverse()
          const reveArry = reversedata.filter(item => item.regionName !== '全部')
          this.disposaldepartment = reveArry
        } else {
          this.$toast(data.message)
        }
      })
    },
    determine() {
      this.$emit('eventSerch', this.foemdata)
      this.popUpshow = false
      this.popactive = 0
      this.eventStatusIndex = -1
      this.eventtypeIndex = -1
      this.foemdata = {
        timeUnitType: '',
        regionCode: this.user.regionCode,
        eventType: '',
        startTime: '',
        endTime: '',
        departmentCode: ''
      }
    },
    // 部门接口
    departmentList() {
      EventOverview.Init.departmentList().then(res => {
        const data = { ...res.data }
        if (data.status === 0) {
          this.zhinnegbumen = data.data
          console.log(this.zhinnegbumen)
        } else {
          this.$toast(data.message)
        }
      })
    },
    zhinnegClick(item, index) {
      this.foemdata.departmentCode = item.departmentCode
      this.zhnnegtypeIndex = index
    }
  }
}
</script>

<style scoped lang="less">
@import '~@/assets/style/EventOverview/model.less';
.event-conditions {
  .event-title {
    font-size: 28px;
    font-weight: 500;
    color: #000000;
    padding: 64px 0 32px 32px;
  }
  .event-status-box {
    margin-right: 32px;
    margin-bottom: 24px;
  }
  .event-titleA {
    font-size: 28px;
    font-weight: 500;
    color: #000000;
    padding: 48px 0 32px 32px;
  }
  .reporting-time /deep/.van-field__control {
    padding-left: 15px !important;
  }
  .reporting-time /deep/ .van-field__body {
    padding-left: 0 !important;
  }
}
.model {
  .event-status-box {
    .event-status:first-child {
      margin-left: 32px;
    }
  }
}
</style>
